<template>
    <div class="lyric1">   
    <div class="minor-head">
		<nav>
			<ul>
				<li>
					<a href="javascript:void(0)">推荐</a>
				</li>
				<li>
					<a href="javascript:void(0)" class='active'>排行榜</a>
				</li>
				<li>
					<a href="javascript:void(0)">歌单</a>
				</li>
				<li>
					<a href="javascript:void(0)">主博电台</a>
				</li>
				<li>
					<a href="javascript:void(0)">歌手</a>
				</li>
				<li>
					<a href="javascript:void(0)">新碟上架</a>
				</li>
			</ul>
		</nav>
    </div>
            <div class="matter"><!--/*轮锅图下面的内容 */-->
                <div class="matter-bottom">      
                    <div class="jf-left"><!--左半部分-->
                        <div class="jf-lycifo">
                          <div class="jf-cvrwrap"><!--专辑图-->
                            <div class="jf-cover">
                                <img class="jf-img" :src='dmusic.img' alt="">
                                <div class="jf-msk"></div>
                            </div>
                          </div>  
                          <div class="jf-cnt"><!--歌词部分-->
                            <div class="jf-hd">
                                <i class="jf-lab"></i>
                                <div class="jf-tit">
                                    <em class="jf-ff2">{{dmusic.songname}}</em>
                                </div>
                            </div>
                            <p class="jf-des">
                            	歌手：
                            	<span>
                            		<a href="javascript:void(0)" class="jf-fc7">{{dmusic.auther}}</a>
                            	</span>
                            </p>
                            <p class="jf-des">
                            	所属专辑：
                            	<span>
                            		<a href="javascript:void(0)" class="jf-fc7">{{dmusic.type}}</a>
                            	</span>
                            </p>
                            <div class="jf-info">
                            	<div class="jf-btn2">
	                            	<a href="script:void(0)" class="u-btn1 " @click='Splaymusic'><i>
                                    <em class="ply"></em>播放</i><a class="u-btni" href="script:void(0)"></a></a>
	                            	<a href="script:void(0)" class="u-btn2 jf-btn"><i>收藏</i></a>
	                            	<a href="script:void(0)" class="u-btn3 jf-btn"><i>分享</i></a>
	                            	<a href="script:void(0)" class="u-btn4 jf-btn"><i>下载</i></a>
	                            	<a href="script:void(0)" class="u-btn5 jf-btn"><i><span class="cnt_comment_count">142790</span></i></a>
                            	</div>
                            </div>
                            <div class="lyric-content">{{dmusic.text}}</div><!--歌词文本-->
                          </div> 
                        </div>

                    </div>
                    <div class="jf-right"><!--右半部分-->
                        <div class="jf-wrap7">
                            <h3 class="jf-hd3"><span class="jf-fl">网易云音乐多端下载</span></h3>
                            <ul class="jf-cb">
                                <li><a href="script:void(0)"></a></li>
                                <li><a href="script:void(0)"></a></li>
                                <li><a href="script:void(0)"></a></li>
                            </ul>
                            <p class="jf-fc4">同步歌单，随时畅听320k好音乐</p>
                        </div>
                    </div>

                </div>     
            </div>  
    </div>
</template>
<script>
    export default{
        name:"songs",
        data(){
            return{
               msg:"歌单",
               Ssrc:'',
               text:''
            }
        },
        created:function(){

        },
        components:{
        },
        methods:{
            Splaymusic:function(){
                let songmess = this.dmusic
                console.log(songmess)
                 this.$store.commit('increment',songmess)
            }
        },
        computed: {
        dmusic () {
            return this.$store.state.dmusic
        },
       
    }    
    }
</script>
<style scoped>
.matter{
   width:100%;
   background-color: rgb(245,245,245);
   height:800px;
}
.matter-bottom{
    margin: 0 auto;
    width:985px;
    height:500px;
   background-color:#fff;
    display:left;
}
.jf-left{/*左部分的 */
    float: left;
    width:70%;  
    border-right:2px solid rgb(245,245,245);
}
.jf-right{
    float: right;
   padding: 20px 40px 40px 30px;
 
}
.jf-wrap7{
    margin: 20px 0;
    padding-bottom: 20px;
      width:200px;
}
.jf-hd3{
position: relative;
    height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 140%;
}
.jf-fl{
float: left;
font-size: 100%;
}
.jf-cb{
height: 65px;
    margin-bottom: 10px;
     /*background:url("../../../static/img/download11.png") 0 -392px;*/
}
.jf-cd li{
    float: left;
}
.jf-fc4{
        color: #999;
}

.jf-lycifo{
    padding: 47px 30px 40px 39px;
}
.jf-cvrwrap{
    float: left;
    width: 206px;
    margin-right: -226px;
    position: relative;
}
.jf-cover{
    width: 198px;
    height: 198px;
    position: relative;
    display: block;
    float: left;
}
.jf-img{
    width: 130px;
    height: 130px;
    margin: 34px;
    display: block;
}
.jf-msk{
    display:block;
    position: absolute;
    width: 206px;
    height: 205px;
    top: -4px;
    left: -4px;
    background:url("../../../static/image/coverall.png") -140px -580px;
}
.jf-cnt{
    float: right;
    width: 414px;
}
.jf-lab{
    float: left;
    width: 54px;
    height: 24px;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    background:url("../../../static/img/download8.png") 0 -463px;
}
.jf-tit{
    margin-left: 64px;
    position: relative;
    top: -6px;
    font-size: 24px;
}
.jf-ff2{
margin-right: 7px;
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.jf-des{
margin: 10px 0;
color: #999;
}
.jf-des span{
color: #333;
} 
.jf-fc7{
    color: #0c73c2;
}
.jf-btn2{
    margin-bottom: 25px;
    margin-right: -10px;
}
.u-btni-addply{
    float: left;
}
.u-btn1{
    float: left;
    color: #fff;
    padding: 0 5px 0 0;
    display: inline-block;
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -428px;    
}
.u-btn1 i{
      float: left;
    padding: 0 7px 0 8px;
    color: #fff;
    display: inline-block;
    height: 31px;
    line-height: 31px;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -387px;    
}
.ply{
    float: left;
    width: 20px;
    height: 18px;
    margin: 6px 2px 2px 0;
    overflow: hidden;
    background:url("../../../static/image/button2.png")  0 -1622px;

}
.u-btni{
    margin-right: -4px;
    width: 31px;
    margin-left: -3px;
    padding-right: 0;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png")   0 -1588px;

}
.u-btn2{
    margin-right: 6px;
    padding: 0 5px 0 5px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn2 i{
    padding-right: 2px;
    padding-left: 28px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -977px;
}
.u-btn3{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn3 i{
    padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -1225px;
}
.u-btn4{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn4 i{
    padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") 0 -2761px;
}
.u-btn5{
    margin-right: 6px;
    padding: 0 5px 0 0;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
    background:url("../../../static/image/button2.png") right -1020px;
}
.u-btn5 i{
        padding-right: 2px;
    padding-left: 28px;
    padding: 0 7px 0 36px;
    float: left;
    height: 31px;
    line-height: 30px;
    min-width: 23px;
    cursor: pointer;
     background:url("../../../static/image/button2.png") 0 -1465px;
}
.cnt_comment_count{
cursor: pointer;
}
.lyric-content{
    width:414px;
    height: 200px;
    margin-top: 13px;
    line-height: 23px;
    display: inline-block;
   background-color:rgb(245,245,245);
}
</style>